<template>
  <div>
    <el-row style="margin-top:10px;background:#FFFFFF;">
      <el-row style="padding:10px">
        <el-col :span="6">
          <i
            class="el-icon-caret-left"
            style="float:left;font-size:26px;color:#C0C4CC;padding-top:2px"
            @click="preDay()"
          ></i>
          <el-date-picker
            v-model="mCurrentDate"
            type="date"
            size="small"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            style="width:70%;float:left;"
          ></el-date-picker>
          <i
            class="el-icon-caret-right"
            style="float:left;font-size:26px;color:#C0C4CC;padding-top:2px"
            @click="nextDay()"
          ></i>
        </el-col>
        <el-col :span="6">
          <el-input
            v-model="mSearchKey"
            placeholder="车辆关键字"
            clearable
            size="small"
            style="width:90%;padding-left:0px"
          ></el-input>
        </el-col>
        <el-col :span="10" style="padding-left:0px">
          <el-button size="small" icon="el-icon-search" circle type="primary" @click="searchCars()"></el-button>
        </el-col>
        <el-col :span="2" style="padding-left:0px">
          <el-row>
            <el-col :span="12">
              <span style="font-size:12px;color:#909399">空闲</span>
              <div class="carDotGreen" style="margin-left:4px"></div>
            </el-col>

            <el-col :span="12">
              <span style="font-size:12px;color:#909399">繁忙</span>
              <div class="carDotYellow" style="margin-left:4px"></div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-table :data="mTableData" v-loading="mTableLoading" border size="small">
        <el-table-column label="车辆" width="150" prop="strInfo"></el-table-column>
        <el-table-column label="车牌" prop="chepai"></el-table-column>
        <el-table-column label="0-7时" width="70" prop="s0_7">
          <template slot-scope="scope">
            <div :class="[scope.row.s0_7==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="8时" width="50" prop="s8">
          <template slot-scope="scope">
            <div :class="[scope.row.s8==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="9时" width="50" prop="s9">
          <template slot-scope="scope">
            <div :class="[scope.row.s9==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="10时" width="50" prop="s10">
          <template slot-scope="scope">
            <div :class="[scope.row.s10==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="11时" width="50" prop="s11">
          <template slot-scope="scope">
            <div :class="[scope.row.s11==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="12时" width="50" prop="s12">
          <template slot-scope="scope">
            <div :class="[scope.row.s12==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="13时" width="50" prop="s13">
          <template slot-scope="scope">
            <div :class="[scope.row.s13==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="14时" width="50" prop="s14">
          <template slot-scope="scope">
            <div :class="[scope.row.s14==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="15时" width="50" prop="s15">
          <template slot-scope="scope">
            <div :class="[scope.row.s15==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="16时" width="50" prop="s16">
          <template slot-scope="scope">
            <div :class="[scope.row.s16==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="17时" width="50" prop="s17">
          <template slot-scope="scope">
            <div :class="[scope.row.s17==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="18时" width="50" prop="s18">
          <template slot-scope="scope">
            <div :class="[scope.row.s18==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="19时" width="50" prop="s19">
          <template slot-scope="scope">
            <div :class="[scope.row.s19==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="20时" width="50" prop="s20">
          <template slot-scope="scope">
            <div :class="[scope.row.s20==true?'carDotGreen':'carDotYellow']"></div>
          </template>
        </el-table-column>
        <el-table-column label="21-0时" width="70" prop="s21_0">
          <template slot-scope="scope">
            <div :class="[scope.row.s21_0==true?'carDotGreen':'carDotYellow']"></div>
            <!-- <div class="carDotFalse" v-else></div> -->
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top:10px;padding-bottom:10px">
        <span
          v-if="totalPage"
          style="float:left;font-size:14px;margin-top:5px;color:#606266;margin-left:10px"
        >
          共&nbsp;
          <span style="color:#F56C6C">{{totalPage}}</span>&nbsp;页/&nbsp;
          <span style="color:#F56C6C">{{totalCount}}</span>&nbsp;条数据
        </span>

        <el-pagination
          style="float:left;margin-left:20px"
          v-if="totalPage"
          background
          layout="prev, pager, next,jumper"
          @current-change="pageIndexChange()"
          :current-page.sync="page"
          :page-count="totalPage"
        ></el-pagination>

        <!-- <el-button type="primary" style="float:right;margin-right:10px" plain size="small">浏览更多</el-button> -->
      </el-row>
    </el-row>
  </div>
</template>


<style >
.carDotGreen {
  width: 15px;
  height: 15px;
  background: #14b38f;
}

.carDotYellow {
  width: 15px;
  height: 15px;
  background: #ff8a22;
}

.mainDiv {
  min-width: 100%;
}
.topRow {
  min-width: 100%;
  background: white;
  padding: 10px;
  border-radius: 2px;
  color: #606266;
  font-size: 16px;
}
</style>



<script>
import { getCarsApi } from "../../api/car.js";
import {
  getRequestHeader,
  loginApi,
  getThirdCompanyApi
} from "../../api/user.js";
import {
  getNowFormatDate,
  getWeekToday,
  formatDateFromDate
} from "../../api/util.js";
import {
  queryControllerOrdersApi,
  getDriversApi,
  dispatchOrderApi,
  dispatchThirdCompanyApi,
  closeOrderApi
} from "../../api/order.js";
import { Loading } from "element-ui";
export default {
  data() {
    return {
      mTableData: [],
      page: 1,
      totalPage: 0,
      pagesize: 5,
      mTableLoading: false,
      mDispatchDialog: false,
      mSelectRow: {},
      mThirdDispatchDialog: false,
      mCdmMap: [],
      mDrivers: [],
      mCars: [],
      mThridCompany: [],
      mCloseDialog: false,
      mCurrentDate: undefined,
      mSearchKey: undefined,
      totalCount: 0
    };
  },
  watch: {
    mCurrentDate(newV, oldV) {
      this.getCars();
    }
  },
  created() {
    // for (var i = 0; i < 5; i++) {
    //   var o = {};
    //   o.s0_7 = false;
    //   o.s8 = false;
    //   o.s9 = false;
    //   o.s10 = true;
    //   o.s11 = false;
    //   o.s12 = false;
    //   o.s13 = true;
    //   o.s14 = false;
    //   o.s15 = true;
    //   o.s16 = false;
    //   o.s17 = false;
    //   o.s18 = false;
    //   o.s19 = true;
    //   o.s20 = false;
    //   o.s21_0 = false;
    //   o.strCarInfo = "帕萨特 川A L57T4";
    //   this.mTableData.push(o);
    // }

    // 默认当日
    this.mCurrentDate = getNowFormatDate();
  },
  mounted() {
    this.getCars();
  },
  methods: {
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },
    setPagesize(size) {
      this.pagesize = size;
      this.queryControllerOrders();
    },
    pageIndexChange() {
      // this.page = this.mUiPageIndex - 1;
      this.getCars();
    },
    queryControllerOrders() {
      var that = this;
      that.mTableLoading = true;
      queryControllerOrdersApi(
        this.page,
        this.pagesize,
        ["allowed"],
        "2020-01-01 00:00:00",
        getNowFormatDate() + " 23:59:59",
        getRequestHeader(),
        new (function() {
          this.success = function(data) {
            that.mTableLoading = false;
            that.page = data.currentPage;
            that.totalPage = data.totalPage;
            that.mTableData = data.list;
          };
          this.fail = function(msg) {
            that.mTableLoading = false;
            that.mTableData = [];
          };
        })()
      );
    },
    selectRow(order) {
      this.mSelectRow = order;
      this.mDispatchDialog = true;
      this.mCdmMap = [];
      var item = {};
      item.index = 0;
      this.mCdmMap.push(item);
      this.getDrivers();
      this.getCars();
    },
    addLine() {
      var item = {};
      item.index = this.mCdmMap.length;
      this.mCdmMap.push(item);
    },
    getThridCompany() {
      var that = this;
      getThirdCompanyApi(
        getRequestHeader(),
        new (function() {
          this.success = function(data) {
            that.mThridCompany = data;
          };
          this.fail = function(msg) {};
        })()
      );
    },
    getDrivers() {
      var that = this;
      getDriversApi(
        getRequestHeader(),
        new (function() {
          this.success = function(data) {
            that.mDrivers = that.refreshDrivers(data);
          };
          this.fail = function(msg) {};
        })()
      );
    },
    getCars() {
      var that = this;
      that.showFullLoading();
      var filter = {};
      filter.searchKey = that.mSearchKey;
      getCarsApi(
        this.page,
        this.pagesize,
        filter,
        getRequestHeader(),
        new (function() {
          this.success = function(data) {
            that.clsoeFullLoading();
            that.page = data.currentPage;
            that.totalPage = data.totalPage;
            that.totalCount = data.totalCount;
            that.mTableData = that.refreshCars(data.list);
          };
          this.fail = function(msg) {
            that.clsoeFullLoading();
          };
        })()
      );
    },
    refreshCars(lst) {
      var that = this;
      lst.forEach(element => {
        // 判断tmp缓存

        element.strInfo = element.name + "（" + element.brand + "）";
        if (element.lstCD_relation) {
          element.s0_7 = true;
          element.s8 = true;
          element.s9 = true;
          element.s10 = true;
          element.s11 = true;
          element.s12 = true;
          element.s13 = true;
          element.s14 = true;
          element.s15 = true;
          element.s16 = true;
          element.s17 = true;
          element.s18 = true;
          element.s19 = true;
          element.s20 = true;
          element.s21_0 = true;
          element.lstCD_relation.forEach(e2 => {
            if (e2.setoffTime && e2.backTime) {
              // 2020-05-25 10:00 2020-05-25 22:00
              // 2020-05-25 10:00:00 2020-05-25 10:59:59
              var tStart = new Date(e2.setoffTime).getTime();
              var tEnd = new Date(e2.backTime).getTime();

              // console.log(e2.setoffTime + "   " + e2.backTime);
              console.log(
                that.mCurrentDate +
                  " 00:00:00" +
                  "     " +
                  that.mCurrentDate +
                  " 07:59:59"
              );
              {
                var t1 = new Date(that.mCurrentDate + " 00:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 07:59:59").getTime();

                if (
                  !(t1 > tEnd || t2 < tStart)
                ) {
                  element.s0_7 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDate + " 08:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 08:59:59").getTime();
                if (
                  !(t1 > tEnd || t2 < tStart)
                ) {
                  element.s8 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDate + " 09:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 09:59:59").getTime();
                if (
                  !(t1 > tEnd || t2 < tStart)
                ) {
                  element.s9 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDate + " 10:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 10:59:59").getTime();
                if (
                  !(t1 > tEnd || t2 < tStart)
                ) {
                  element.s10 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDate + " 11:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 11:59:59").getTime();
                if (
                  !(t1 > tEnd || t2 < tStart)
                ) {
                  element.s11 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDate + " 12:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 12:59:59").getTime();
                if (
                  !(t1 > tEnd || t2 < tStart)
                ) {
                  element.s12 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDate + " 13:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 13:59:59").getTime();
                if (
                  !(t1 > tEnd || t2 < tStart)
                ) {
                  element.s13 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDate + " 14:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 14:59:59").getTime();
                if (
                  !(t1 > tEnd || t2 < tStart)
                ) {
                  element.s14 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDate + " 15:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 15:59:59").getTime();
                if (
                  !(t1 > tEnd || t2 < tStart)
                ) {
                  element.s15 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDate + " 16:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 16:59:59").getTime();
                if (
                  !(t1 > tEnd || t2 < tStart)
                ) {
                  element.s16 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDate + " 17:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 17:59:59").getTime();
                if (
                  !(t1 > tEnd || t2 < tStart)
                ) {
                  element.s17 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDate + " 18:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 18:59:59").getTime();
                if (
                  !(t1 > tEnd || t2 < tStart)
                ) {
                  element.s18 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDate + " 19:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 19:59:59").getTime();
                if (
                  !(t1 > tEnd || t2 < tStart)
                ) {
                  element.s19 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDate + " 20:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 20:59:59").getTime();
                if (
                  !(t1 > tEnd || t2 < tStart)
                ) {
                  element.s20 = false;
                }
              }
              {
                var t1 = new Date(that.mCurrentDate + " 21:00:00").getTime();
                var t2 = new Date(that.mCurrentDate + " 23:59:59").getTime();
                if (!(t1 > tEnd || t2 < tStart)) {
                  element.s21_0 = false;
                }
              }
            }
          });
        }
      });
      return lst;
    },
    refreshDrivers(lst) {
      var that = this;
      var result = [];
      lst.forEach(element => {
        if (
          that.mSelectRow.id != element.orderId &&
          element.status == "using"
        ) {
        } else {
          result.push(element);
        }
      });
      return result;
    },
    deleteDispatchRow(row) {
      // this.mCdmMap.$remove(row);
      this.mCdmMap.splice(this.mCdmMap.indexOf(row), 1);
    },
    dispatchOrder() {
      var that = this;
      console.log(JSON.stringify(this.mCdmMap, null, 2));
      this.mCdmMap.forEach(element => {
        var userId = element.userId;
        var carId = element.carId;
        if (!userId || !carId) {
          that.$message.error("请把分配关系填完整");
          return;
        }
      });
      // 判断出是否有分配重复的
      {
        var hash = {};
        for (var i in this.mCdmMap) {
          if (hash[this.mCdmMap[i].userId]) {
            that.$message.error("司机分配重复，请检查");
            return;
          }
          hash[this.mCdmMap[i].userId] = true;
        }
      }

      {
        var hash = {};
        for (var i in this.mCdmMap) {
          if (hash[this.mCdmMap[i].carId]) {
            that.$message.error("车辆分配重复，请检查");
            return;
          }
          hash[this.mCdmMap[i].carId] = true;
        }
      }

      that.showFullLoading();
      dispatchOrderApi(
        this.mSelectRow.id,
        this.mCdmMap,
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function(data) {
            that.clsoeFullLoading();
            that.mDispatchDialog = false;
            that.$message.success("分配成功");
            that.queryControllerOrders();
          };
        })()
      );
    },

    closeOrder() {
      var that = this;
      this.showFullLoading();
      closeOrderApi(
        this.mSelectRow.id,
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function(data) {
            that.clsoeFullLoading();
            that.mCloseDialog = false;
            that.$message.success("关闭成功");
            that.queryControllerOrders();
          };
        })()
      );
    },
    thirdDispatch(order) {},
    dispatchThirdCompany() {
      var that = this;
      if (!this.mSelectRow.thirdCompanyId) {
        this.$message.error("请选择三方公司");
        return;
      }
      that.showFullLoading();
      dispatchThirdCompanyApi(
        this.mSelectRow.id,
        this.mSelectRow.thirdCompanyId,
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.clsoeFullLoading();
            that.$message.error(msg);
          };
          this.success = function(data) {
            that.clsoeFullLoading();
            that.mThirdDispatchDialog = false;
            that.$message.success("分配成功");
            that.queryControllerOrders();
          };
        })()
      );
    },
    searchCars() {
      this.page = 1;
      this.getCars();
    },
    preDay() {
      if (!this.mCurrentDate) {
        return;
      }
      var date = new Date(Date.parse(this.mCurrentDate.replace(/-/g, "/")));
      date.setDate(date.getDate() - 1);
      this.mCurrentDate = formatDateFromDate(date);
      this.searchCars();
    },
    nextDay() {
      if (!this.mCurrentDate) {
        return;
      }
      var date = new Date(Date.parse(this.mCurrentDate.replace(/-/g, "/")));
      date.setDate(date.getDate() + 1);
      this.mCurrentDate = formatDateFromDate(date);
      this.searchCars();
    }

    //----------over methods------
  }
};
</script>